<template>
  <div class="container">
    <div class="nav">
      <div class="time">{{ now }}</div>
      <div class="city" @click="state.show = true">切换城市</div>
    </div>
    <div class="city-info">
      <p class="city">{{ state.city }}</p>
      <p class="weather">{{ state.today.weather }}</p>
      <h2 class="temp">
        <em>{{ state.today.temperature }}</em>℃
      </h2>
      <div class="detail">
        <span>风力: {{ state.today.windPower }}级</span> |
        <span>风向: {{ state.today.windDirection }}风</span> |
        <span>空气湿度: {{ state.today.humidity }}%</span>
      </div>
    </div>
    <div class="future" v-if="state.future.length">
      <div class="group">
        明天:
        <span class="tm">白天:{{ state.future[1].dayTemp }}℃ {{ state.future[1].dayWeather }} {{ state.future[1].dayWindDir }}风
          {{ state.future[1].dayWindPower }}级</span>
        <span class="tm">夜间:{{ state.future[1].nightTemp }}℃ {{ state.future[1].nightWeather }}
          {{ state.future[1].nightWindDir }}风 {{ state.future[1].nightWindPower }}级</span>
      </div>
      <div class="group">
        后天:
        <span class="tm">白天:{{ state.future[2].dayTemp }}℃ {{ state.future[2].dayWeather }} {{ state.future[2].dayWindDir }}风
          {{ state.future[2].dayWindPower }}级</span>
        <span class="tm">夜间:{{ state.future[2].nightTemp }}℃ {{ state.future[2].nightWeather }}
          {{ state.future[2].nightWindDir }}风 {{ state.future[2].nightWindPower }}级</span>
      </div>
    </div>

    <div class="echarts-wrap" ref="echartsWrap"></div>

    <van-action-sheet v-model:show="state.show">
      <div class="content">
        <van-area title="地区" :area-list="areaList" :columns-num="2" @confirm="selectCity"
          @cancel="state.show = false" />
      </div>
    </van-action-sheet>
  </div>
</template>

<!-- <script>
  export default {
    setup() {

    }
  }
</script> -->

<script setup>
import { reactive, ref, onBeforeMount, nextTick } from 'vue';
import { areaList } from '@vant/area-data';
import * as echarts from 'echarts';
import { onMounted } from 'vue';

let now = ref('00:00:00')
setInterval(() => {
  now.value = new Date().toLocaleTimeString()
}, 1000);

const state = reactive({
  city: '',
  today: {},
  show: false,
  future: []
})

AMap.plugin('AMap.CitySearch', function () {
  var citySearch = new AMap.CitySearch()
  citySearch.getLocalCity(function (status, result) {
    if (status === 'complete' && result.info === 'OK') {
      // 查询成功，result即为当前所在城市信息
      // console.log(result);
      state.city = result.city
      getWeather(result.city)
    }
  })
})


const getWeather = (city) => {
  //加载天气查询插件
  AMap.plugin("AMap.Weather", function () {
    //创建天气查询实例
    var weather = new AMap.Weather();
    //执行实时天气信息查询
    weather.getLive(city, function (err, data) {
      // console.log(err, data);
      state.today = data
    });
    weather.getForecast(city, function (err, data) {
      console.log(err, data);
      state.future = data.forecasts

      nextTick(() => { // 保证内部的逻辑会在页面渲染完毕后执行
        initEcharts(data.forecasts.map(item => item.dayTemp))
      })
      
    });
  });
}

const selectCity = ({ selectedOptions }) => {
  console.log(selectedOptions[1].text)
  state.city = selectedOptions[1].text
  getWeather(selectedOptions[1].text)
  state.show = false
}


const echartsWrap = ref(null)
const initEcharts = (arr) => {
  // console.log(echartsWrap.value);
  let myChart = echarts.init(echartsWrap.value)
  myChart.setOption({
    tooltip: {},
    xAxis: {
      type: 'category',
      data: ['今天', '明天', '后天', '大后天']
    },
    yAxis: {},
    series: [
      {
        name: '温度',
        type: 'line',
        data: arr
      }
    ]
  });
}


// onMounted(() => {
//   initEcharts()
// })










</script>

<style lang="css" scoped>
.container {
  min-height: 100vh;
  background: #000;
  opacity: 0.7;
  color: #fff;
}

.nav {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.city-info {
  text-align: center;
}

p {
  margin-top: 10px;
}

.temp {
  font-size: 26px;
  margin: 10px 0;
}

.temp em {
  font-size: 34px;
}

.future {
  margin-top: 30px;
  padding: 0 10px;
}

.group {
  height: 44px;
  line-height: 44px;
  background-color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  padding: 0 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.echarts-wrap {
  width: 100%;
  height: 50vh;
}
</style>